<template>
    <div>
        <div class="headerbox">
            <div class="header">
                <div class="headlogo"></div>
                <div class="navbox">
                    <div class="navitem navactive">首页</div>
                    <div class="navitem">
                        关于我们 
                        <span></span>
                        <div class="navhiddenbox">
                            <a class="navhiddenitem">发展历程</a>
                            <a class="navhiddenitem">专业团队</a>
                            <a class="navhiddenitem">引之优势</a>
                            <a class="navhiddenitem">参股流程</a>
                            <a class="navhiddenitem">参股答疑</a>
                        </div>
                    </div>
                    <div class="navitem">影视项目</div>
                    <div class="navitem">
                        新闻资讯
                        <span></span>
                        <div class="navhiddenbox">
                            <a class="navhiddenitem">公司动态</a>
                            <a class="navhiddenitem">影视资讯</a>
                            <a class="navhiddenitem">行业分析</a>
                            <a class="navhiddenitem">政策解读</a>
                        </div>
                    </div>
                    <div class="navitem">公益活动</div>
                    <div class="navitem">联系我们</div>
                </div>
            </div>
        </div>
        <div style="height:70px"></div>
    </div>
    
</template>

<script>
export default {
    data(){
        return {

        }
    },
    methods:{

    },
    mounted() {
        var navitem = document.getElementsByClassName("navitem")
        var num = navitem.length;
        for(var i = 0;i < num;i++){
            navitem[i].onmouseenter = function(e){
                for(var j = 0;j < num;j++){
                    navitem[j].classList.remove("ctive")
                }
                e.target.classList.add("ctive")
            }
            navitem[i].onmouseleave = function(e){
                for(var j = 0;j < num;j++){
                    navitem[j].classList.remove("ctive")
                }
            }
        }

        var navhiddenitem = document.getElementsByClassName("navhiddenitem")
        var num2 = navhiddenitem.length;
        for(var k = 0;k < num2;k++){
            navhiddenitem[k].onmouseenter = function(e){
                for(var n = 0;n < num2;n++){
                    navhiddenitem[n].classList.remove("ctive")
                }
                console.log(e.target.classList)
                e.target.classList.add("ctive")
            }
            navhiddenitem[k].onmouseleave = function(e){
                for(var n = 0;n < num2;n++){
                    navhiddenitem[n].classList.remove("ctive")
                }
            }
        }

    }
}
</script>

<style lang="scss" scoped>

.headerbox{
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0;
    z-index: 999;
    background: #FFFFFF;
    box-shadow: none;
    transition: all .2s ease;
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.header{
    width: 1214px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all .2s ease;
    
}
.headermask{
    background: #fff;
    box-shadow: 0 2px 15px 0 rgba(0,72,174,.15);
}
.noshadow{
    box-shadow: none !important;
}
.headlogo{
    cursor: pointer;
    width: 282px;
    height: 64px;
    background: url(../assets/img/headlogo.png) no-repeat;
    background-size: 100% 100%;
}
.navbox{
    width: 780px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.navitem{
    width: 130px;
    height: 100%;
    font-size: 20px;
    font-weight: 400;
    line-height: 70px;
    color: #474747;
    cursor: pointer;
    transition: all .2s ease;
    text-align: center;
    position: relative;
}
.navitem span{
    display: inline-block;
    width: 15px;
    height: 11px;
    background: url(../assets/img/navjt.png) no-repeat;
    background-size: 100% 84%;
    transition: all .2s ease;
    transform: rotateZ(0deg);
}
// .navitem:hover{
//     color: #1E1E1E;
//     font-weight: bold;
// }
.navitem:hover span{
    transform: rotateZ(180deg);
}
.navitem:hover .navhiddenbox{
    display: block;
}
.navactive{
    color: #1E1E1E;
    font-weight: bold;
}
.ctive{
    color: #1E1E1E;
    font-weight: bold;
}
.navhiddenbox .ctive{
    color: #EEAF60 !important;
}
.navitem .navhiddenbox{
    width: 100%;
    position: absolute;
    top: 69px;
    left: -10px;
    background-color: #fff;
    transition: all .5s ease;
    overflow: hidden;
    display: none;
    box-shadow: 0 3px 3px 0 rgba(0,72,174,.15);
    animation-duration: .5s;
    box-sizing: border-box;
}
.navhiddenitem{
    display: block;
    color: #474747 !important;
    font-weight: normal !important;
    line-height: 45px;
}
// .navitem .navhiddenbox a:hover {
//     color: #1E1E1E;
//     font-weight: bold !important;
// }

</style>






